<!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->

<!--[if !IE ]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
    <meta name="description" content="KUTE.js is a minimal Javascript animation engine with outstanding performance and supporting 3D transforms, SVG Morph, draw SVG, SVG transform, cross-browser animation, scroll animation, CSS3 properties and many more.">
    <meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,morph svg,draw svg,svg transform,css3,3d transform,scroll,Javascript,Native Javascript,vanilla javascript,jQuery">
    <meta name="author" content="dnp_theme">
    <link rel="shortcut icon" href="./assets/img/favicon.png">

    <title>KUTE.js | Javascript Animation Engine</title>

    <!-- RESET CSS -->
    <link type="text/css" href="./assets/css/reset.css" rel="stylesheet">

    <!-- DEMO KUTE CSS -->
    <link type="text/css" href="./assets/css/kute.css" rel="stylesheet">

    <!-- Ion Icons -->
    <link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

    <!-- Polyfill -->
    <script src="./assets/js/minifill.js"></script>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]-->

    <!-- legacy browsers support via polyfill, you must remove the above when used
    <script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->

</head>

<body>
    <div class="site-wrapper">

        <div class="navbar-wrapper">
            <div class="content-wrap">
                <a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
                <ul class="nav">
                    <li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
                        <ul class="subnav">
                            <li><a href="features.html">Feature Overview</a></li>
                            <li><a href="properties.html">Supported Properties</a></li>
                        </ul>
                    </li>
                    <li class="btn-group">
                        <a href="#" data-function="toggle">Examples <span class="caret"></span></a>
                        <ul class="subnav">
                            <li><a href="examples.html">Core Engine</a></li>
                            <li><a href="css.html">CSS Plugin </a></li>
                            <li><a href="svg.html">SVG Plugin </a></li>
                            <li><a href="text.html">Text Plugin </a></li>
                            <li><a href="attr.html">Attributes Plugin </a></li>
                        </ul>
                    </li>
                    <li class="btn-group">
                        <a href="#" data-function="toggle">API <span class="caret"></span></a>
                        <ul class="subnav">
                            <li><a href="start.html">Getting Started</a></li>
                            <li><a href="api.html">Public Methods</a></li>
                            <li><a href="options.html">Tween Options</a></li>
                            <li><a href="easing.html">Easing Functions</a></li>
                            <li><a href="extend.html">Extend Guide</a></li>
                        </ul>
                    </li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </div>
        </div>


        <div class="content-wrap">
            <div class="columns welcome">
                <div class="col2 table">
                    <div class="frontpage">
                        <h2 class="nomargin"></h2>
                        <p class="lead"></p>
                        <p class="btns">
                            <a class="btn btn-blue" href="https://github.com/thednp/kute.js/archive/master.zip">Download</a>
                            <a class="btn" href="https://github.com/thednp/kute.js">Github</a>
                            <a class="btn" href="http://www.jsdelivr.com/#!kute.js">CDN 1</a>
                            <a class="btn" href="https://cdnjs.com/libraries/kute.js">CDN 2</a>
                            <a class="btn btn-green replay" href="#">Replay</a>
                        </p>
                    </div>
                </div>
                <div class="col2 table">
                    <div class="cell">
                        <div id="blocks" class="columns nomargin">
                            <div class="col3 bg bg-yellow"></div>
                            <div class="col3 bg bg-orange"></div>
                            <div class="col3 bg bg-red"></div>

                            <div class="col3 bg bg-blue"></div>
                            <div class="col3 bg bg-olive"></div>
                            <div class="col3 bg bg-indigo"></div>

                            <div class="col3 bg bg-lime"></div>
                            <div class="col3 bg bg-green"></div>
                            <div class="col3 bg bg-teal"></div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="featurettes dark">
            <div class="content-wrap">
                <h2 class="nomarginlarge">At A Glance</h2>
                <div class="columns hiddenoverflow">
                    <div class="col2">
                        <h3>Badass Performance</h3>
                        <p>KUTE.js is crazy fast with it's <a href="features.html#performance">outstanding performance</a> and super fast code execution, it's also memory efficient. I made a 
                            <a href="performance.html">cool demo</a> to showcase how KUTE.js really scales on performance. </p>
                    </div>
                    <div class="col2">
                        <h3>Prefix Free</h3>
                        <p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> mostly for <code>transform</code>, and even allows 
                            you to use the utilities yourself in your apps or your own plugins.</p>
                    </div>
                </div>
                <div class="columns hiddenoverflow">
                    <div class="col2">
                        <h3>All Browsers Compatible</h3>
                        <p>KUTE.js covers <a href="features.html#compatibility">all modern browsers</a> with fallback options for legacy browsers. When using <a href="https://polyfill.io/">polyfills</a> 
                            and the right <a href="http://browserhacks.com" target="_blank">browser detection</a> you can manage all kinds of <a href="examples.html#crossbrowser">fallback animations</a> 
                            for legacy browsers.</p>
                    </div>
                    <div class="col2">
                        <h3>Powerful Methods</h3>
                        <p>KUTE.js allows you to <a href="features.html#methods">create tweens</a> and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full 
                            spectrum <a href="options.html">tween options</a>.</p>
                    </div>
                </div>
                <div class="columns hiddenoverflow">
                    <div class="col2">
                        <h3>Packed With Tools</h3>
                        <p>KUTE.js comes with a <a href="css.html" title="The CSS Plugin provides support for border radius, additional color and box model properties, as well as for clip and backgroun-position.">CSS Plugin</a>, 
                            a <a href="svg.html" title="The SVG Plugin allows you to morph and draw SVG, as well as animate other SVG related CSS properties.">SVG Plugin</a>,
                            an <a href="attr.html" title="The Attributes Plugin allows you to animate any numeric presentation attribute.">ATTR Plugin</a>, a <a href="text.html">Text Plugin</a> and a jQuery plugin, 
                            <a href="easing.html">easing functions</a>, color convertors, utility functions, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
                    </div>
                    <div class="col2">
                        <h3>Plenty Of Properties</h3>
                        <p>KUTE.js covers <a href="properties.html">all animation needs</a> such as SVG morph &amp; transform and other specific CSS properties, then CSS3 <code>transform</code>, <code>scroll</code>, 
                            <code>border-radius</code>, and almost the full box model or text properties.</p>
                    </div>
                </div>
                <div class="columns hiddenoverflow">
                    <div class="col2">
                        <h3>MIT License</h3>
                        <p>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms.</p>
                    </div>
                    <div class="col2">
                        <h3>Top Notch Documentation</h3>
                        <p>All examples, code, tips &amp; tricks are very well documented.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-wrap">
            <h2>Getting Started</h2>
            <div class="columns hiddenoverflow">
                <div class="col3">
                    <span class="ion-ios-game-controller-b media"></span>
                    <h3>Examples</h3>
                    <p>See <a href="examples.html">KUTE.js in action</a> with all it's functions, options and features.</p>
                </div>
                <div class="col3">
                    <span class="ion-ios-paper media"></span>
                    <h3>Documentation</h3>
                    <p>The <a href="start.html">API documentation</a> is here for you to get you started.</p>
                </div>

                <div class="col3">
                    <span class="ion-ios-pulse-strong media"></span>
                    <h3>Performance</h3>
                    <p class="marginbottom">Head over to the <a href="performance.html">performance</a> test page right away.</p>
                </div>
            </div>

            <ul id="share" class="nav">
                <li>Share </li>
                <li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
                <li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
                <li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
            </ul>

        </div>

        <!-- FOOTER -->
        <footer>
            <div class="content-wrap">
                <p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
                <p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
            </div>
        </footer>

    </div>
    <!-- /.site-wrapper -->




    <!-- JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="./src/kute.min.js"></script>
    <!-- KUTE.js core -->
    <script src="./src/kute-css.min.js"></script>
    <!-- KUTE.js CSS Plugin -->
    <script src="./src/kute-text.min.js"></script>
    <!-- KUTE.js CSS Plugin -->
    <script src="./assets/js/scripts.js"></script>
    <!-- some stuff -->
    <script src="./assets/js/home.js"></script>
    <!-- some stuff -->
</body>

</html>
